import { observer } from "mobx-react-lite";

const MST: React.FC<{ store: any; timeTraveller: any }> = function MST({
  store,
  timeTraveller,
}) {
  return (
    <div>
      {store.count}
      {store.double}
      <button onClick={store.increment}>++</button>
      <button onClick={store.decrement}>--</button>

      <button
        disabled={!timeTraveller.canUndo}
        onClick={() => {
          timeTraveller.undo();
        }}
      >
        undo
      </button>
      <button
        disabled={!timeTraveller.canRedo}
        onClick={() => {
          timeTraveller.redo();
        }}
      >
        redo
      </button>
    </div>
  );
};

export default observer(MST);
